<script setup>
import { ref, } from 'vue'
import { useRoute, useRouter } from 'vue-router'


const route = useRoute()
const router = useRouter()

const jump = (name) => {
    router.push({
        path: '/ingrebients',
        query: {
            name
        }
    })
}



const allFoods = ref([])
const foodId = route.query.id
console.log({ foodId })

let str = localStorage.getItem("CS")
// console.log(str);

if (str) {
    let cs = JSON.parse(str)
    console.log(cs);

    if (foodId) {
        // let arr = cs.filter(item => item.id == foodId);
        allFoods.value = cs.filter(item => item.id == foodId);
        console.log("6666", allFoods.value)
    }
}
</script>

<template>
    <div class="food">
        <ul class="food-list-box">
            <!-- 遍历 allFoods 数组 -->
            <li v-for="item in allFoods" :key="item.id" class="list-box-li">
                <h3>{{ item.name }}</h3>
                <!-- 遍历 item.cs 数组 -->
                <ul class="food-list-out">
                    <li v-for="subItem in item.cs" :key="subItem.id" class="list-out-li">
                        <p>{{ subItem.name }}</p>
                        <img :src="subItem.image_url
                            " alt="">
                        <!-- 若 subItem.cs 存在，遍历 subItem.cs 数组 -->
                        <ul v-if="subItem.cs && subItem.cs.length" class="food-list-inside">
                            <li v-for="subSubItem in subItem.cs" :key="subSubItem.id" class="list-inside-li">
                                <!-- -->
                                <router-link :to="`/food/${subSubItem.id}`" @click="jump(subSubItem.name)">
                                    <p>{{ subSubItem.name }}</p>
                                </router-link>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<style scoped lang="less">
.food {
    width: 100%;
    height: 100%;
    // background-color: #d72121;
    padding: 20px 20px;

    /* box-sizing: border-box; */
    .food-list-box {
        width: 100%;

        .list-box-li {
            width: 100%;

            h3 {
                font-size: 28px;
                // color: #fff;
                font-family: aaa;
                margin-bottom: 20px;
            }

            .food-list-out {
                border: 1px solid #000;
                border-radius: 10px;
                padding: 10px 20px;

                .list-out-li {
                    display: inline-block;
                    margin-bottom: 20px;

                    p {
                        font-size: 20px;
                        font-family: aaa;
                        margin-bottom: 10px;
                    }

                    img {
                        width: 100%;
                        border-radius: 10px;
                    }

                    .food-list-inside {
                        width: 100%;
                        display: flex;
                        justify-content: flex-start;
                        padding: 10px 10px;
                        border: 1px solid #ccc;
                        border-radius: 10px;
                        flex-wrap: wrap;

                        .list-inside-li {
                            border: 1px solid #ccc;
                            padding: 5px 5px;
                            border-radius: 5px;
                            margin: 5px 5px;
                            text-align: center;
                            display: flex;
                            /* 使用 flex 布局 */
                            align-items: center;
                            /* 垂直居中 */
                            justify-content: center;
                            /* 水平居中，确保兼容性 */
                        }
                    }
                }
            }
        }
    }
}
</style>